<template>
  <div>
    <el-container>
      <el-main>
        <el-form :inline="true" >
          <el-form-item style="height: 18px">
            <el-upload
              class="upload-demo"
              action="#"
              :http-request="uploadFile"
              :before-upload="beforeUpload"
              show-file-list="true"
            >
              <el-button type="primary">批量导入</el-button>
            </el-upload>
          </el-form-item>
<!--          <el-form-item style="height: 18px">-->
<!--            <el-button  type="primary"  >单个添加</el-button>-->
<!--          </el-form-item>-->
          <el-link :href="baseUrl+teacherUrl" style="margin-left: 20px">
            <el-button type="text" icon="el-icon-download" style="font-weight: bolder">Excel模板下载</el-button>
          </el-link>
<!--          <el-button style="float: right" type="primary"  >单个添加</el-button>-->

        </el-form>
        <el-divider ></el-divider>
        <el-card class="box-card">
          <el-table :data="tableData" style="width: 100%" size="small" stripe border>
            <el-table-column prop="jobNumber" label="工号" width="140px">
              <template slot-scope="scope">
                {{ scope.row.jobNumber ? scope.row.jobNumber :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column prop="teacherName" label="姓名" align="center" width="140px">
              <template slot-scope="scope">
                {{ scope.row.teacherName ? scope.row.teacherName :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column prop="teacherPhoneNumber" label="联系方式" align="center">
              <template slot-scope="scope">
                {{ scope.row.teacherPhoneNumber ? scope.row.teacherPhoneNumber :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column prop="teacherIntroduction" label="个人简介"  align="center"  show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ scope.row.teacherIntroduction ? scope.row.teacherIntroduction :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column v-if="false" prop="tid" label="教师ID"  >
              <template slot-scope="scope">
                {{ scope.row.tid ? scope.row.tid :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" >
              <template slot-scope="scope">
                <!--                  <el-button type="primary" icon="el-icon-edit" @click="handleClick(scope.$index)"></el-button>-->
                <el-button size="small" icon="el-icon-edit" type="primary" @click="handleClick(scope.$index,scope.row)"></el-button>
<!--                <template>-->
<!--                  <el-popconfirm title="确定要删除该教师吗？">-->
<!--                    <el-button slot="reference" size="small" type="danger" icon="el-icon-delete"></el-button>-->
<!--                    &lt;!&ndash;                      <el-button slot="reference" type="primary" icon="el-icon-delete" @click="handleClickDelete(scope.$index)"></el-button>&ndash;&gt;-->
<!--                  </el-popconfirm>-->
<!--                </template>-->
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="page.pageNum"
            :total="page.totalSize"
            @current-change="handleCurrentChange"
            style="margin-top: 10px;float: right;margin-bottom: 10px"
            layout="total,prev, pager, next, jumper"
          />
        </el-card>
      </el-main>
    </el-container>
    <el-dialog title="编辑教师信息" :visible.sync="editDialogFormVisible">
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px" style="width: 500px " label-position="left">
        <el-form-item label="工号" prop="jobNumber">
          <el-input v-model="editForm.jobNumber" />
        </el-form-item>
        <el-form-item label="姓名" prop="teacherName">
          <el-input v-model="editForm.teacherName" />
        </el-form-item>
<!--        <el-form-item label="联系方式" prop="teacherPhoneNumber">-->
<!--          <el-input v-model="editForm.teacherPhoneNumber" />-->
<!--        </el-form-item>-->
        <el-form-item label="个人简介" prop="teacherIntroduction">
          <el-input v-model="editForm.teacherIntroduction" />
        </el-form-item>
        <el-form-item>
          <el-button @click="editDialogFormVisible = false;resetForm('editForm')">取 消</el-button>
          <el-button @click="resetForm('editForm')">重置</el-button>
          <el-button type="primary" @click.native="editSubmitForm()">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { uploadTeacherExcel } from '../../../api/user'
import { getTeacherList } from '../../../api/teacher'
import { UpdateTeacherInfo } from '../../../api/teacher'

export default {
  name: 'Teachers',
  data() {
    return {
      baseUrl: this.global.picBaseUrl,
      editDialogFormVisible: false,
      currentPage: 1,
      teacherList: [],
      tid: '',
      page: {
        pageNum: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      editForm: {
        jobNumber: '',
        teacherName: '',
        // teacherPhoneNumber: '',
        teacherIntroduction: ''
      },
      rules: {
        jobNumber: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        teacherName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      },
      // url: this.baseUrl + '/file/excel?type=teacher',
      url:  'http://47.96.182.33:8081/file/excel?type=teacher',
      teacherUrl:'/file/excel?type=teacher',
      tableData: []
    }
  },
  created() {
    this.getTList()
  },
  methods: {
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTList()
    },
    beforeUpload(file) {
      console.log(file)
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'xls'
      const extension2 = testmsg === 'xlsx'
      if (!extension && !extension2) {
        this.$message({
          message: '上传文件只能是 xls、xlsx格式!',
          type: 'warning' })
      }
      return extension || extension2
    },
    getTList() {
      getTeacherList(
        {
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }
      ).then(res => {
        this.tableData = res.data.list
        this.teacherList = res.data.list
        this.page = res.data.page
      })
        .catch(err => {
          this.$message.error('请求教师列表失败！')
        })
    },

    uploadFile(item) {
      var that = this
      const fileObj = item.file
      // FormData 对象
      const form = new FormData()
      // 文件对象
      form.append('file', fileObj)
      uploadTeacherExcel(form).then(res => {
        this.url = res.data
        that.$message.success('上传成功！')
      }).catch(err => {
        that.$message.error('上传请求失败！')
      })
    },
    updateTeacher() {
      UpdateTeacherInfo({
        tid: this.tid,
        jobNumber: this.editForm.jobNumber,
        teacherName: this.editForm.teacherName,
        // teacherPhoneNumber: this.editForm.teacherPhoneNumber,
        teacherIntroduction: this.editForm.teacherIntroduction
      }).then(res => {
        this.$message.success('编辑信息成功！')
        this.getTList()
      }).catch(err => {
        this.$message.error('更新信息请求失败！')
      })
    },
    editSubmitForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.editDialogFormVisible = false
          this.updateTeacher()
        } else {
          alert('填写不符合要求')
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClick(index, row) {
      this.tid = this.tableData[index].tid
      this.editDialogFormVisible = true
      this.editForm = Object.assign({}, row)
    }

    // handleCurrentChange: function(currentPage) {
    //   this.currentPage = currentPage
    //   console.log(this.currentPage) // 点击第几页
    // }

  }
}
</script>

<style scoped>
  .el-aside{
    line-height:80px;
    margin-left: 30px;
  }
  .main1{
    margin-left: 30px;
  }
  .text{
    font-size: 20px;
    font-weight: bold;
  }
</style>

<style lang="css">

  .el-tooltip__popper{font-size: 14px; max-width:50% } /*设置显示隐藏部分内容，按50%显示*/

</style>
